<template>
    <div class="login">
        <div class="login-card">
            <div class="card-header">
                <img src="/logo.png" style="height: 4rem;margin-left: 5px;">
                <span style="font-size: 2rem;font-weight: 700;margin-left: 6px;white-space: nowrap;">班前培训系统</span>
            </div>
            <el-form
                ref="ruleFormRef"
                style="width: 80%"
                :model="ruleForm"
                status-icon
                :rules="rules"
                label-width="auto"
                class="demo-ruleForm"
                size="large"
            >
                <el-form-item label="用户名" prop="username" style="margin-bottom: 40px;">
                    <el-input v-model="ruleForm.username" placeholder="请输入用户名" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" prop="password" style="margin-bottom: 40px;" >
                    <el-input
                        v-model="ruleForm.password"
                        type="password"
                        autocomplete="off"
                        placeholder="请输入密码"
                    />
                </el-form-item>
                <div class="login-btn">
                    <!-- <el-button type="primary" size="large" >
                        登录
                    </el-button> -->
                    <el-button :icon="CircleClose"  size="large"  round  @click="resetForm(ruleForm)">重置</el-button>
                    <el-button :icon="User"  size="large" color="#606266" round  @click="submitForm(ruleFormRef)">登录</el-button>
                    <!-- <el-button @click="resetForm(ruleFormRef)">Reset</el-button> -->
                </div>
            </el-form>
        </div>
    </div>
    
</template>

<script setup>
import { reactive, ref } from 'vue'
import {User, CircleClose} from "@element-plus/icons-vue"
import { loginAPI, getMenusByRoleId } from '@/api/user'
import { useUserStore } from "@/store/user.ts";
import { useMenuStore } from "@/store/menu.ts";
import { useRouter } from 'vue-router';

import { dynamicRoutes } from "@/router/dynamicRoutes.ts";
const router = useRouter();
const ruleFormRef = ref()
const ruleForm = ref({
    username: '',
    password: '',
})

const rules = ref({
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
})

const submitForm = async (formEl) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            let data = await loginAPI(ruleForm.value);
            console.log(data);
            const userStore = useUserStore();
            userStore.setUserInfo(data);
            let userInfo = userStore.userInfo;
            localStorage.setItem('userInfo', JSON.stringify(userInfo));
            let menus = await getMenusByRoleId(userInfo.roleId);
            localStorage.setItem('menus', JSON.stringify(menus));
            const menuStore = useMenuStore();
            menuStore.setMenuList(menus);
            dynamicRoutes(menus);
            router.push({ path: '/home' });
        } else {
            console.log('error submit!')
        }
    })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.username = '';
  formEl.password = ''
}
</script>

<style lang="less" scoped>
.login{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f2f3f5;
    .login-card{
        width: 600px;
        height: 400px;
        background-color: #ffffff;
        border-radius: 1rem;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        .card-header{
            width: 50%;
            height: 10%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 3rem;
        }
        .login-btn {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-top: 40px;
            white-space: nowrap;
            .el-button {
                width: 220px;
            }
        }
        
    }
}
</style>